<template>
  <div>
    <div class="upload">
      <el-upload
        class="upload"
        drag
        action="http://localhost:8080/file/upload"
        multiple
        :on-success="fileUpSuccess"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
            只能上传PDF文件</br>
            文件格式为:姓名_岗位_意向工作地</br>
            例:张三_java工程师_南京
        </div>
      </el-upload>
    </div>
    <div class="resumeForm">
        <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
        >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
      <el-select v-model="ruleForm.sex" placeholder="请选择性别">
        <el-option label="男" value="1"></el-option>
        <el-option label="女" value="0"></el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="ruleForm.phone" placeholder="请输入手机号码"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="学校" prop="school">
        <el-input v-model="ruleForm.school" placeholder="请输入学校"></el-input>
      </el-form-item>
      <el-form-item label="学历" prop="education">
      <el-select v-model="ruleForm.education" placeholder="请选择学历">
        <el-option label="专科" value="专科"></el-option>
        <el-option label="本科" value="本科"></el-option>
        <el-option label="硕士" value="硕士"></el-option>
        <el-option label="博士" value="博士"></el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="意向岗位" prop="postion">
      <el-select v-model="ruleForm.postion" placeholder="请选择意向岗位">
        <el-option label="Java前端开发" value="Java前端开发"></el-option>
        <el-option label="Java后端开发" value="Java后端开发"></el-option>
        <el-option label="软件测试" value="软件测试"></el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="意向地区" prop="addr">
      <el-select v-model="ruleForm.addr" placeholder="请选择意向地区">
        <el-option label="温州" value="温州"></el-option>
        <el-option label="南京" value="南京"></el-option>
        <el-option label="杭州" value="杭州"></el-option>
        <el-option label="上海" value="上海"></el-option>
        <el-option label="北京" value="北京"></el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="推荐人" prop="referrer">
        <el-input v-model="ruleForm.referrer"></el-input>
      </el-form-item>
        <el-button @click="submitForm(ruleForm)">提交</el-button>
      </el-form-item>
    </el-form>
    </div>
  </div>
</template>

<script>
import { save } from '@/api/resumelist'

export default {
  data() {
    return {
      ruleForm: {
        name: '',
        sex: '',
        phone: '',
        email: '',
        school: '',
        education: '',
        postion: '',
        addr: '',
        pdf:'',
        referrer: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            min: 8,
            max: 11,
            message: '长度在 8 到 11 个字符',
            trigger: 'blur'
          }
        ],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        school: [{ required: true, message: '请输入学校', trigger: 'blur' }],
        education: [{ required: true, message: '请选择学历', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm(resumeMessage) {
      this.listLoading = true
      // console.log(pdf)
      save(resumeMessage).then((res) => {
        console.log(res)
        if (res.status == 200) {
          this.$message.success('提交成功')
        } else {
          this.$message.error('提交失败')
        }
      })
    },
    fileUpSuccess(res, file, fileList) {
      console.log('文件上传成功', res)
      var pdf=res.data.url
      this.$notify.success({
        title: '成功',
        message: `文件上传成功`
      })
      console.log(pdf)
      this.ruleForm.pdf = pdf
      // this.dialogFileUploadVisible = false
    },

  }
}
</script>

<style>
.upload {
  margin-left: 5%;
  margin-bottom: 5%;
}
.resumeForm button {
  float: right;
}
.el-form {
  margin: auto;
}
.el-select {
  width: 100%;
}
.el-option {
  width: 100%;
}
</style>